import { Component, PropsWithChildren } from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtIcon } from "taro-ui"
import { AtNoticebar, AtList, AtListItem, AtTag } from 'taro-ui'
import { getMarketCircle } from '../../api/home'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      marketList: []
    }
  }
  componentWillMount() { }

  componentDidMount() {
    this.getMarket()
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  getMarket() {
    getMarketCircle().then((res) => {
      this.setState({
        marketList: res.data.data
      })
    })
  }
  onClick() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>楼市圈</Text>
          </View>
        </View>
        <View className='container'>
          {
            this.state.marketList?.map((item: any, index: number) => {
              return <AtList key={index}>
                <AtListItem
                  title={item.name}
                  note={item.title}
                  thumb={item.icon}
                />
                <Button className='btn1'>
                  {item.btn1}
                </Button>
                <Button className='btn2'>
                  {item.btn2}
                </Button>
                <View className='ping'>
                  <View className='month'>{item.month}
                    <Text>{item.desc}</Text>
                  </View>
                  <View className='date'>
                    <Text>{item.date}</Text>
                    <Image className='lou' src={item.img} />
                  </View>
                </View>
              </AtList>
            })
          }

          {/* <AtList>
            <AtListItem
              title='建发曹颖'
              note='建发·文翰府'
              thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
            />
            <Button className='btn1'>
              在线咨询
            </Button>
            <Button className='btn2'>
              拨打电话
            </Button>
          </AtList>
          <View className='ping'>
            <View className='month'>4月
              <Text>城央大宅</Text>
            </View>
            <View className='date'>
              <Text>04-29</Text>
              <Image className='jing1' src={Image2} />
              <Image className='jing2' src={Image3} />
              <Image className='jing3' src={Image4} />
            </View>
          </View>
          <AtList>
            <AtListItem
              title='恒大湖山半岛薛草'
              note='建发·文翰府'
              thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
            />
            <Button className='btn1'>
              在线咨询
            </Button>
            <Button className='btn2'>
              拨打电话
            </Button>
          </AtList> */}
        </View>
      </View >
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394